import React, {Component} from 'react'
import {
    StyleSheet,
    View,
    Text,
    Image,
    ListView,
    TouchableOpacity,
} from 'react-native'

const Dimensions = require('Dimensions');
const {width} = Dimensions.get('window');
import {setSpText} from './ScreenUtil'

import TeacherPage from '../pages/Home/TeacherPage'

// listItem marginLeft

export default class Teacher extends Component {
    constructor(props){
        super(props);
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataTeacherSource: ds.cloneWithRows([
                'John', 'hero', 'may', 'hello','my exe'
            ])
        }
    }

    render() {
        return (
            <View style={styles.commandTeacher} ref="test">
                <ListView 
                    dataSource={this.state.dataTeacherSource}
                    renderRow={(rowData) => this.renderTeacherRow(rowData)}
                />
            </View>
        )
    }

    
    // 推荐课程render
    renderTeacherRow(rowData) {
        return (
            <TouchableOpacity style={styles.recommendTeacher} onPress={()=>this.gotoTeachPage()}>
                <Image style={styles.teacherImg} source={require('../assets/imgs/teacher.png')} />
                <View style={styles.teacherRight}>
                    <View style={styles.teacherNameWrapper}>
                        <Text style={styles.teacherName}>张老师</Text>
                    </View>
                    <View>
                        <Text style={styles.fromSchool}>毕业于:英国流经大学</Text>
                    </View>
                    <Text style={styles.teacherInfos}>张老师张老师张老师张老师张老师张老师张老师张老师张老师张老师张老师张老</Text>
                    <View style={styles.followTips}>
                        <Text style={styles.followTipsText}>已关注</Text>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
    // 跳转到老师介绍页
    gotoTeachPage() {
        global.log('press---------')
        this.props.navigator.push({
            component: TeacherPage
        })
    }
}



const styles = StyleSheet.create({
    // 推荐老师
    commandTeacher: {
        flex: 1,
        padding: 10,
    },
    recommendTeacher: {
        flexDirection: 'row',
        marginBottom: 10,
    },
    teacherImg: {
        width: 100,
        height: 100 * 1.31,
        marginRight: 10
    },
    teacherRight: {
        width: width - 130,
    },
    teacherName: {
        fontSize: 16,
        paddingTop: 2,
        paddingBottom: 2,
        fontWeight: 'bold',
    },
    fromSchool: {
        fontSize: 16,
        lineHeight: 20,
        marginTop: 5
    },
    teacherInfos: {
        fontSize:setSpText(28),
        lineHeight: 22
    },
    followTips: {
        width: 60,
        height: 22,
        backgroundColor: '#DCDCDC',
        position: 'absolute',
        top: 1,
        right: 0,
        borderRadius: 40,
    },
    followTipsText: {
        color: '#fff',
        textAlign: 'center'
    },
    commandMechanism: {
        padding: 10
    }
})